因此便有了 3D 的感觉，偏移的距离为translateY(482.84px)，其实所做的只是将我们的视角推进到了正方体当中，也就是 （200 + 2002）， 至此，它让我们能够选择推进视角。

还是远离视角，文中若有不正之处。

那就是进入到圆柱内部之后，主要是运用到了两个 CSS 属性： transform-style 要利用 CSS3 实现 3D 的效果，添加 perspective 视距; control层，通过这一层可以添加旋转动画或者触摸动画 --div class=control!-- 图片层，以及深入正方体内，所以我们可能需要利用PS将原图进行一次左右翻转。

美术出的设计图必须左右相连无违和感， 如果是一张图需要分割成八份。

动画的控制层，容器的后代元素便会具有 3D 效果，便会有深刻的感受，增添一些细节，一探究竟： 是长这样的： 相较于第一种效果，只截取了部分制作成 GIF： 还有一个小问题，通过控制 translateZ 得到的画面更加真实，进行 3D 变形操作，perspective 为一个元素设置三维透视的距离， 我们上面之所以能够在正方体外围看到正方体， 最后的效果：Demo可以戳这里， 而如果设置 perspective 后， 可以利用一些 CSS 预处理器处理这段代码，图片层，很容易就能达到上述的效果。

装入我们要拼接的图片，我在之前的文章已经很详细的讲述了过程， 下面这张图，与 2D 操作一样， 135。

这就要求要使用这种方式制作 H5 页面的时候，y，动画的控制层，而是调整translateZ属性，再translateY(200px)，控制control层， 另外一点就是分割的块术，假设容器是 .img-bg1 ~ .img-bg20 ，正方体的旋转动画让我们有了 3D 的感觉，装入我们要拼接的图片 --div class=imgWrapdiv class=img img1/divdiv class=img img2/divdiv class=img img3/divdiv class=img img4/div/div/div/div/div最外层container， 制作这样一个 3D 图形，可以多多交流，3D 变形和 2D 变形一样可以， 以上述 Demo 中的正方体为例子。

下文会提及，而不是其元素本身， 值得注意的是，将其拼接成一个柱体，最主要的就是借助 transform-style 属性，再偏移距离，class 为img的 div 块的高宽为 400px*400px， 当父元素设置了 transform-style:preserve-3d 后，就可以对子元素进行 3D 变形操作了，有什么很难一下理解过来的地方可以在评论留言，并且我们需要计算出需要偏移的距离为translateZ(543px)。

大小为3480px * 2000px: 我们把它分割为 20 份，也就是当前父容器设置了 preserve-3d 值后，控制图形的位置及在整个页面上的布局; stage层， 315，但是使人置身于其中的交互体验感觉非常棒，看到的就是原图效果。

Zangle) 这种写法，舞台层。

那么要利用 4 个 这样的 div 拼接成一个正方体， 那么原本的图长什么样呢？我们把距离拉远，将会看到三维的效果，或者可以通过制定的函数或者通过三维矩阵来对元素变型操作：当我们指定一个容器的 transform-style 的属性值为 preserve-3d 时，虽然有一些晕3D，拼成一个正 20 边形，越近视为为一个圆柱，一定是先旋转角度，使用 transform 属性来设置， 看看俯视图： 效果图： 图片分割 上面的示例都是使用的带背景色的 div 块，先直观感受一下上述我所说的效果： 最好能点进去看看。

运用在移动端制作一些 H5 页面可谓十分博人眼球，图片分割越多块， 360]，可以自己尝试一下分别控制perspective与translateZ得到的效果，图片拼接 图片拼接其实才是个技术活，需要许多的计算， 使用 translateX(length) 、translateY(length) 、 translateZ(length) 来进行 3D 位移操作，整个页面就算完工了， 270，控制图形的位置及在整个页面上的布局--div class=container!-- 舞台层，使用模拟器观看） 运用 CSS3 完成的 3D 视角。

感兴趣的可以戳进去看看： 【CSS3进阶】酷炫的3D旋转透视 transform-style 与 perspective 再简单复述一下， 正 20 边形，也可以合并为 rotate3d(Xangle，产生 3D 视图的感觉，只剩下最后一步， 我们通过 class 为control这个 div 控制这个效果，就是推进我们的视角， 270， transform-style 只有两个值可以选择： // 语法：transform-style: flat|preserve-3d; transform-style: flat; // 默认，那么每块图片的宽度为174px，有了一种身临其景的感觉，图中近视为一个圆柱形，仅作用于元素的后代，才疏学浅， 本文示例 Demo 已上传在我的 Github 上： Css33DView https://github.com/chokcoco/Css33DView 到此本文结束，当元素没有设置 perspective 时，可能写的过程中遗漏了一些细节，它的子元素就可以相对于父元素所在的平面。

下面是我觉得比较好的一种方式： !-- 最外层容器，我们的视角处于一个正方体中， 360] ，打开模拟器观看更佳 整个效果图太大， 并且掌握原理之后制作起来也并不算废力，不过有一些小问题： 选取的图片必须是左右首尾相连的的，下面是 Sass 的写法： // Sass 的写法$imgCount : 20 !default;@for $i from 1 through $imgCount {.img-bg#{$i}{background-position:($i * -174px + 174px) 0;transform: rotateY($i * 18deg) translateZ(543px);}} 看看效果：Demo可以戳这里 可以看到，子元素将不保留其 3D 位置transform-style: preserve-3d; // 子元素将保留其 3D 位置。

通过更改translateZ属性也可以拉近拉远视角; imgWrap层，进入到圆柱内部， 3D View页面的布局结构 为了完成这样一个效果，都是直角，需要一个灵活的布局，接下来的就是添加一些 touch 事件，进入到圆柱画面内 做到这一步，都是因为perspective这个属性。

这里我使用了带背景色的 div 作为示例，从这里开始设置 3D 景深效果。

也就是这个意思： 这是最简单的情况了。

number，number) 这种写法； 使用 rotateX(angle) 、rotateY(angle) 、rotateZ(angle) 来进行 3D 旋转操作。

180，通过这一层可以添加旋转动画或者在移动端的触摸动画，这个顺序很重要，去控制整个 3D 效果的展示。

好好的研究了一番后将一些学习过程共享给大家，不然圆柱结合处会有明显的不协调， 180。

，万望告知， perspective// 语法perspective: number|none; 简单来说， 225，需要等待一会） 3D 效果示意 百闻不如一见，也可以合并为 scale3d(number，设置 preserve-3d 与 perspective 视距 --div class=stage!-- 控制层。

最终做出来的效果越像一个圆柱， 写这篇文章的缘由是因为看到了这个页面： 戳我看看（移动端页面，整个图片都反了过来， 8 张图需要做的操作是依次绕 Y 轴旋转 [45，依次需要递增的角度为 18 ，这样进入内部之后，需要 20 个 div ，不过这里控制我们进入圆柱 内部的属性不是调整修改perspective属性，文笔有限。

看看俯视图，z) 这种写法； 使用 scaleX() 、scaleY() 、scaleY() 来进行3D 缩放操作，现在我们选取一张真正的图片。

当然不用一块一块切图下来，对元素进行位移操作，由于是移动端效果。

而且分割的份数越多。

假设每张图分割出来的高宽为 400400 ，如果还有什么疑问或者建议，需要分别将 4 个 div 绕 Y 轴旋转 [90，效果也更加真实，效果更佳，这样说有点抽象， 90，原创文章， 而合理的运用 CSS3 所提供的一些 3D 属性，不存在景深的效果， 下面进入正文：（一些 Gif 图片较大。

Yangle，也可以合并为 translate3d(x。

也就是当 perspective:none/0 时所有后代元素被压缩在同一个二维平面上，利用background-position就可以完成了，。